<template>
  <div class="container" :style="{height:list_height+'px'}">
    <div class="view" :style="{width:viewWidth+'px'}">
      <img :src="viewUrl" alt>
    </div>
    <div class="list" :style="{width:swiperWidth+'px',height:list_height+'px'}">
      <ul :style="offsetTop">
        <li v-for="(item,index) in list" :key="index" @click="viewShow(item,index)" :style="{marginBottom:spacing+'px'}">
          <img :src="item.url" alt :style="{height:imgHeight+'px'}" :class="{borderShow:item.isShow}">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "swiper",  
  data() {
    return {
      list: [
        {url:require("../assets/images/swiper1.jpg")},
        {url:require("../assets/images/swiper2.jpg")},
        {url:require("../assets/images/swiper3.jpg")},
        {url:require("../assets/images/swiper4.jpg")},
        {url:require("../assets/images/swiper1.jpg")},
        {url:require("../assets/images/swiper2.jpg")},
        {url:require("../assets/images/swiper3.jpg")},
        {url:require("../assets/images/swiper4.jpg")},
      ],
      //大图显示路径
      viewUrl: "",
      //   大图显示的宽度
      viewWidth: 187,
      //竖型滚动，轮播图的宽度
      swiperWidth: 43,
      // 轮播图显示区的高度（竖型为高度，横型为宽度）
      list_height: 187,
      //竖型滚动，单个图片的高度
      imgHeight: 43,
      //位移的总距离
      distance: 0,
      //每次要滚动的距离（图片的高度+两个图片之间的间距）
      unit_distance: 48,
      //   两个图片之间的间距
      spacing: 5,
      //轮播图显示区图片的数量
      img_num: 4
    };
  },
  computed: {
    offsetTop() {
      //这里用了计算属性，用transform来移动整个图片列表
      return {
        transform: `translate3d(0,${this.distance}px, 0)`
      };
    }
  },

  mounted() {

    this.viewUrl = this.list[0].url;
  },
  methods: {
      //点击轮播图滚动
    viewShow(item, index) {
        //修改大图显示URL
         this.viewUrl = item.url;
         this.insertData();
        item.isShow=true;
      // Ul的高度
      var ul_height =
        this.list.length * (this.imgHeight + this.spacing) - this.spacing;
      //list的高度
      var list = this.list_height;
      if (
        index == parseInt(-this.distance / this.unit_distance) &&
        this.distance != 0
      ) {
        this.move(this.unit_distance, 1);
      } else if (
        index ==
          parseInt(-this.distance / this.unit_distance) + (this.img_num - 1) &&
        this.distance > -(ul_height - list)
      ) {
        // console.log(index);
        this.move(this.unit_distance, -1);
      }
    },
    // 轮播图滚动动画
    move(offset, direction) {
      let des = 0;
      const temp = setInterval(() => {
        if (des >= offset) {
          clearInterval(temp);
        } else {
          des += 3;
          this.distance += 3 * direction;
        }
      }, 20);
    },
    //往数据里添加是否显示选中图片边框数据
    insertData(){
        this.list.forEach((el,index)=>{
                el.isShow=false;
        });
    }

  }
};
</script>
<style scoped>
.container {
  width: 100%;
  /* height: 1.87rem; */
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.list {
  position: relative;
  /* width: 0.43rem; */
  height: 100%;
  cursor: pointer;
}
.list ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.list li {
  /* margin-bottom: 0.05rem; */
  width: 100%;
}
.list li img {
  width: 0.43rem;
}
.view {
  height: 100%;
  /* width: 1.87rem; */
}
.view img {
  width: 100%;
  height: 100%;
}
.borderShow{
    border:1px solid #64312C;
}
</style>